GitHub Actionsにreviewdogを飼ってみた！(eslint編)
はじめに
最近GitHub Actionsの記事をよく見かけるので、試してみることにしました。
本稿は、GitHub Actionsにreviewdogを連携させた記事となります。
reviewdogとは
各種linterの実行結果をプルリクエストのコメントで指摘してくれます。 詳細な説明は作者様の記事を参照するのが良いです。
Reviewdog を飼ってコードレビューや開発を改善しませんか
reviewdogは、GitHub Actionsに対応しており、GitHub Actionsのusesで指定できるコードが用意されております。
詳細は、Pubilc Reviewdog GitHub Actionsを参照してください。今回はreviewdog/action-eslintを活用します。
用意するサンプル
用意したリポジトリは以下のようなプロジェクトです
- reactプロジェクト
- git commitのタイミングでeslintでチェック。エラーだったらコミットしない
つまりチェク結果が「エラー」になるコミットは、commitできないのでpushされない。一方で「警告」になるコミットはpushされる設定です。
本稿では、eslintのチェク結果が「警告」になるコミットが含まれたプルリクエストに、reviewdogが対象箇所をコメントで通知してくれることを試します。
試してみる
GitHub Actionsの設定ファイル作成
こちらはシンプルに、masterにpushされたらlintする設定を書いてます。(おまけです)
- .github/workflows/main.yml
on:
push:
branches:
- master
name: test frontend sample app
jobs:
lint:
name: Lint check
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@v1
with:
node-version: 12
- run: yarn install
- run: yarn lint
reviewdogのGitHub Actions設定作成
警告をプルリクエストのコメントに出力する設定を書きます。
reviewdog/action-eslintをコピペして、eslint_flagsにプロジェクトに適したeslintのフラグと引数を指定します。github_tokenの部分は自動的に生成されます。
- .github/workflows/reviewdog.yml
name: reviewdog
on: [pull_request]
jobs:
eslint:
name: runner / eslint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: eslint
uses: reviewdog/action-eslint@v1
with:
github_token: ${{ secrets.github_token }}
reporter: github-pr-review # Change reporter.
eslint_flags: 'src/**/*.{ts,tsx}'
プルリクエストにコメントが出力されるのを確認
警告がでるプルリクエストを作る
ブランチを切り替えます
$ git checkout -b develop
一応プロジェクトの動作を確認
$ yarn install $ yarn lint $ yarn start
src/index.tsxでno-console出るようにソースを書き換える
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
console.log('foo'); // <- 追加
ReactDOM.render(<App />, document.getElementById('root'));
警告が出力されることを確認
$ yarn lint
yarn run v1.17.3
$ eslint 'src/**/*.{ts,tsx}'
/Users/takahashi.shunichi/go/src/github.com/shuntaka9576/github-actions-front-sample/src/index.tsx
6:1 warning Unexpected console statement no-console # <-- no consoleが出ていることを確認
✖ 1 problem (0 errors, 1 warning)
✨ Done in 2.53s.
コミットを作る (Warningが出ていますが、関係ないので無視します..すいません..)
$ git add src/index.tsx
$ git commit -m "Change file"
Warning: Setting pre-commit script in package.json > scripts will be deprecated
Please move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js file
Or run ./node_modules/.bin/husky-upgrade for automatic update
See https://github.com/typicode/husky for usage
husky > pre-commit (node v12.6.0)
↓ Stashing changes... [skipped]
→ No partially staged files found...
✔ Running linters...
[develop d5618fe] Change file
1 file changed, 1 insertion(+)
プルリクエストを作ります(hubコマンドを使っていますが、GitHubのWeb画面からやっても問題ありません)
$ git push $ hub pull-request https://github.com/shuntaka9576/github-actions-front-sample/pull/1
結果確認
プルリクエスト画面を確認(コメント部分)
出力されました！犬アイコンかわいいですね！
その他の参考画像
プルリクエスト画面を確認(全体)
GitHub Actionsの画面
最後に
GitHub Actionsとreviewdogの連携を試しました。他のCI/CDツールに慣れている人はサクッと構築できるのではないでしょうか。reviewdogも非常に簡単に組み込めたので、今後活用していきたいと思います。
